<template>
    <a-table
            class="hk_table"
            :data="dataSource"
            :loading="loading"
            page-position="bottom"
            :scroll="scroll"
            :bordered="false"
            :pagination="paginationOptions">
        <template #columns>
            <a-table-column  v-for="item in props.columns"
                             :title="item.title"
                             ellipsis
                             tooltip
                             :data-index="item.dataIndex">
                <template v-if="slots.hasOwnProperty(item.dataIndex)" #cell="{ record }">
                    <slot :name="item.dataIndex" :record="record"/>
                </template>
            </a-table-column>
        </template>
    </a-table>
</template>

<script setup>
    const baseSize = document.body.offsetWidth / 1920 * 100;

    const props=defineProps({
        columns:{
            type:Array,
            default:()=>[]
        },
        url:{
            type:String,
            default:()=>''
        },
        params:{
            type:Object,
            default:()=>({})
        },
    })

    const slots = useSlots();

    const scroll = {
        y: document.body.offsetHeight - baseSize * 2
    }

    const loading = ref(false)

    const dataSource = ref([])

    // 页码信息
    const pagination = ref({
        IsQueryRowCount: true,
        PageIndex: 1,
        PageSize: 10,
        RowCount: 0
    })

    // 页码的基本配置
    const defaultPaginationOptions = {
        showTotal:true,
        showJumper:true,
        showPageSize:true,
        onChange(current){
            pagination.value = {
                ...pagination.value,
                PageIndex:current
            }
            query()
        },
        onPageSizeChange(size){
            pagination.value = {
                ...pagination.value,
                PageSize:size,
                PageIndex:1
            }
            query()
        }
    }

    const paginationOptions = computed(() => {
        const { RowCount , PageIndex , PageSize  } = pagination.value
        return {
            ...defaultPaginationOptions,
            total:RowCount,
            current:PageIndex,
            pageSize:PageSize
        }
    })

    const query = ()=>{
        const {  url , params={}  } = props
        const queryParams = {
            ...params ,
            PagerInfo:{
                ...pagination.value
            }
        }
        loading.value = true
        $HTTP.post(url , queryParams ).then(res=>{
            if(res.Data){
                dataSource.value = res.Data
                pagination.value = res.PagerInfo
                loading.value = false
            }
        })
    }

    // 监听option变化重新设置图表
    watch(() => props.params, (newVal) => {
        query()
    }, { deep: true });

    onMounted(()=>{
        query()
    })

</script>

<style scoped lang="less">
    .hk_table {
        flex: 1;

        ::v-deep {
            @media (min-width: 1920px) {
                .arco-table-container {
                    height: calc(100vh - 2rem);
                }
            }

            @media (max-width: 1920px){
                .arco-table-container {
                    height: calc(100vh - 2.1rem);
                }
            }

            @media (max-width: 1440px) {
                .arco-table-container {
                    height: calc(100vh - 2.5rem);
                }
            }


            .arco-table-container {
                .arco-table-element {
                    > thead {
                        .arco-table-th {
                            font-size: .18rem;
                            color: #676767;
                            font-weight: bold;
                            background-color: transparent;
                        }
                    }

                    > tbody {
                        .arco-table-td {
                            font-size: .16rem;
                            color: #676767;
                            line-height: .4rem;

                            .arco-table-cell {
                                padding: 0 .1rem;
                                line-height: .4rem;
                            }
                        }
                    }
                }
            }

            .arco-pagination-item{
                padding: 0 .08rem;
            }

            .arco-select-view-single.arco-select-view-size-medium .arco-select-view-input,
            .arco-select-view-single.arco-select-view-size-medium .arco-select-view-value,
            .arco-pagination-jumper > span,
            .arco-pagination,
            .arco-input-wrapper .arco-input.arco-input-size-medium,
            .arco-pagination-total , .arco-pagination-item ,.arco-select-view-single{
                font-size: .14rem;
                height: .3rem;
                line-height: .3rem;
                min-height: inherit;
            }


        }

    }
</style>